<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        #container {
            border: 1px solid #23b795;
            position: absolute;
            top: 50%;
            left: 300px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    /*表单验证;
    (1）用户名不能为空
    (2）用户名必须在6-14位之间
    (3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式)
    (4)密码和确认密码一致,邮箱地址合法。
    (5）统一失去焦点验证
    (6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
    (7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
    (8）最终表单中所有项均合法方可提交*/

    //页面加载后执行 给用户名添加blur事件
    window.onload = function () {
        /**
         * 判断用户名
         * @type {HTMLElement}
         */
        let unameElt = document.getElementById("uname");
        //先获取span标签
        let unameErrorSpan = document.getElementById("unameErrorSpan");
        //失去焦点事件
        unameElt.onblur = function () {
            let uname = document.getElementById("uname").value;  // 首先获取用户名
            uname = uname.trim();  // 去除前后空白
            //判断用户名是否为空
            if (uname.length === 0) {
                unameErrorSpan.innerHTML = "用户名不能为空";
            } else {
                //判断长度
                if (uname.length <= 6 || uname.length >= 14) {
                    unameErrorSpan.innerHTML = "用户名必须在[6-14]位之间";
                } else {
                    //判断是否含有非法字符
                    let regExp = /^[A-Za-z0-9]+$/;
                    let ok = regExp.test(uname);
                    if (ok) {
                        //合法

                    } else {
                        //含有非法字符
                        unameErrorSpan.innerHTML = "用户名只能有数字和字母组成";
                    }
                }
            }
        }
        //获得焦点事件
        unameElt.onfocus = function () {
            //清空非法的value
            if (unameErrorSpan.innerText !== "") {
                unameElt.value = "";
            }
            //清空span
            unameErrorSpan.innerHTML = "";
        }


        /**
         * 邮箱验证
         * @type {HTMLElement}
         */
        let emailElem = document.getElementById("email");
        let emailErrorSpan = document.getElementById("emailErrorSpan");
        //绑定失焦事件 (一切都是在失去焦点后进行判断)]
        emailElem.onblur = function () {
            //首先要拿到邮箱内容
            let email = document.getElementById("email").value;
            email = email.trim();
            //判断邮箱是否为空
            if (email.length === 0) {
                emailErrorSpan.innerHTML = "邮箱不能为空";
            } else {
                //判断邮箱是否合法
                let regExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                let ok = regExp.test(email);
                if (ok) {
                    //合法

                } else {
                    emailErrorSpan.innerHTML = "邮箱格式不正确";
                }
            }
        }
        //绑定获得焦点事件
        emailElem.onfocus = function () {
            //清空emailElem的value
            if (emailErrorSpan.innerText !== "") {
                emailElem.value = "";
            }
            //清空span
            emailErrorSpan.innerHTML = "";
        };


        /**
         * 密码验证
         * @type {HTMLElement}
         */
        let pwdElt = document.getElementById("pwd");
        let pwd1 = document.getElementById("pwd1")
        let cfiPwdErrorSpan = document.getElementById("cfiPwdErrorSpan");
        let pwdErrorSpan = document.getElementById("pwdErrorSpan");
        // 密码失焦事件
        pwdElt.onblur = function () {
            let pwd = document.getElementById("pwd").value;
            pwd = pwd.trim();
            if (pwd.length === 0) {
                pwdErrorSpan.innerHTML = "密码不能为空";
            } else {
                //判断合法
                let regExp =  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                let ok = regExp.test(pwd);
                if (ok) {
                    //合法
                } else {
                    pwdErrorSpan.innerHTML = "至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符"
                }
            }
        }
        //确认密码失焦事件
        pwd1.onblur = function () {
            let pwd = document.getElementById("pwd").value;
            pwd = pwd.trim();
            let cfiPwd = document.getElementById("pwd1").value;
            cfiPwd = cfiPwd.trim();
            if (pwd !== cfiPwd) {
                cfiPwdErrorSpan.innerHTML = "两次密码不一样,请重新输入";
            } else {

            }
        }
        //密码获得焦点事件
        pwdElt.onfocus = function () {
            //清空value
            if (pwdErrorSpan.innerText !== "") {
                pwdElt.value = "";
            }
            //清空span
            pwdErrorSpan.innerHTML = "";
        }
        //确认密码获得焦点事件
        pwd1.onfocus = function () {
            //清空value
            if (cfiPwdErrorSpan.innerText !== "") {
                pwd1.value = "";
            }
            //清空span
            cfiPwdErrorSpan.innerHTML = "";
        }


        let submitBtnElt = document.getElementById("submitBtn");
        submitBtnElt.onclick = function () {
            //若用户第一次打开页面,当点击注册时,自动给表单进行聚焦失焦事件(span的内容不会显示),以便下方判断是否要提交内容
            pwdElt.focus();
            pwdElt.blur();
            pwd1.focus();
            pwd1.blur();
            emailElem.focus();
            emailElem.blur();
            unameElt.focus();
            unameElt.blur();

            if (unameErrorSpan.innerText === "" && pwdErrorSpan.innerText === "" && cfiPwdErrorSpan.innerText === "" && emailErrorSpan.innerText === "") {
                //获取表单对象
                let userFormElt = document.getElementById("userForm");
                //给表单加上提交属性
                userFormElt.submit();
                //还可以添加action属性
                userFormElt.action = "#";
            }
        };
    };
</script>
<div id="container">
    <form id="userForm" method="get">
        <label for="uname">用户名:</label><input type="text" name="uname" id="uname"/>
        <span id="unameErrorSpan" style="font-size: 12px;color: red"></span>
        <br/>

        <label for="email">邮 箱:</label><input type="text" name="email" id="email"/>
        <span id="emailErrorSpan" style="font-size: 12px;color: red"></span>
        <br/>

        <label for="pwd">密 码:</label><input type="Password" name="pwd" id="pwd"/>
        <span id="pwdErrorSpan" style="font-size: 12px;color: red"></span>
        <br/>

        <label for="pwd1">确认密码:</label><input type="Password" id="pwd1"/>
        <span id="cfiPwdErrorSpan" style="font-size: 12px;color: red"></span>
        <br/>

        <input type="button" value="注册" id="submitBtn"/>
        <input type="reset" value="重置"/>
    </form>
</div>
</body>
</html>

